<template>
	<view class="page">
		<flowbefore :beflows="beflows" :status="status" :isBtnClick="isBtnClicks" @save="save" @submit="submit"
			:statusType="statusType">
			<template>
				<view class="padding-bottom-100">
					<form class="flowform">
						<view class="formlist inputtext" v-if="$formOperates.read('flowTitle',formOperatesData)">
							<view class="formgroup border-bottom-E3E3E5">
								<view class="labletitle"><label>流程标题</label></view>
								<view class="controlvalue">
									<input type="text" v-model="travelApply.flowTitle" name="flowTitle"
										:disabled="judge('flowTitle')"/>
								</view>
							</view>
						</view>
						<view class="formlist inputtext" v-if="$formOperates.read('billNo',formOperatesData)">
							<view class="formgroup border-bottom-E3E3E5">
								<view class="labletitle"><label>单号编号</label></view>
								<view class="controlvalue">
									<input type="text" v-model="travelApply.billNo" name="billNo"
										:disabled="judge('billNo')"/>
								</view>
							</view>
						</view>
						<view class="formlist inputtext" @tap="flowUrgent"
							v-if="$formOperates.read('flowUrgent',formOperatesData)">
							<view class="formgroup border-bottom-E3E3E5">
								<view class="labletitle"><label>紧急程度</label></view>
								<view class="controlvalue">
									<input type="text" v-model="travelApply.flowUrgent" name="flowUrgent"
										placeholder="选择" />
								</view>
								<view class="advanceicon iconfont icon-xiangyou"></view>
							</view>
						</view>
						<view class="formlist inputtext" v-if="$formOperates.read('applyDate',formOperatesData)">
							<view class="formgroup border-bottom-E3E3E5">
								<view class="labletitle"><label>申请日期</label></view>
								<view class="controlvalue">
									<input type="text" v-model="travelApply.applyDate" name="applyDate"
										:disabled="judge('applyDate')"/>
								</view>
							</view>
						</view>
						<view class="formlist inputtext" v-if="$formOperates.read('departmental',formOperatesData)">
							<view class="formgroup border-bottom-E3E3E5">
								<view class="labletitle"><label>所属部门</label></view>
								<view class="controlvalue">
									<input type="text" v-model="travelApply.departmental" name="departmental"
										:disabled="judge('departmental')"/>
								</view>
							</view>
						</view>
						<view class="formlist inputtext" v-if="$formOperates.read('position',formOperatesData)">
							<view class="formgroup">
								<view class="labletitle"><label>员工职务</label></view>
								<view class="controlvalue">
									<input type="text" v-model="travelApply.position" name="position"
										:disabled="judge('position')"/>
								</view>
							</view>
						</view>
						<view class="formlist inputtext margin-top-20"
							v-if="$formOperates.read('travelMan',formOperatesData)">
							<view class="formgroup border-bottom-E3E3E5">
								<view class="labletitle"><label>出差人员</label></view>
								<view class="controlvalue">
									<input type="text" v-model="travelApply.travelMan" name="travelMan"
										placeholder="输入出差人员" :disabled="judge('travelMan')" />
								</view>
							</view>
						</view>
						<view class="formlist inputtext" @tap="startDate"
							v-if="$formOperates.read('startDate',formOperatesData)">
							<view class="formgroup border-bottom-E3E3E5">
								<view class="labletitle">
									<label>开始时间</label>
									<text class="required">*</text>
								</view>
								<view class="controlvalue">
									<input type="text" v-model="travelApply.startDate" name="startDate"
										placeholder="选择" />
								</view>
								<view class="advanceicon iconfont icon-xiangyou"></view>
							</view>
						</view>
						<view class="formlist inputtext" @tap="endDate"
							v-if="$formOperates.read('endDate',formOperatesData)">
							<view class="formgroup border-bottom-E3E3E5">
								<view class="labletitle">
									<label>结束时间</label>
									<text class="required">*</text>
								</view>
								<view class="controlvalue">
									<input type="text" v-model="travelApply.endDate" name="endDate" placeholder="选择" />
								</view>
								<view class="advanceicon iconfont icon-xiangyou"></view>
							</view>
						</view>
						<view class="formlist inputtext" v-if="$formOperates.read('prepaidTravel',formOperatesData)">
							<view class="formgroup border-bottom-E3E3E5">
								<view class="labletitle"><label>预支旅费</label></view>
								<view class="controlvalue">
									<input type="digit" v-model="travelApply.prepaidTravel" name="prepaidTravel"
										placeholder="输入预支旅费" :disabled="judge('prepaidTravel')" />
								</view>
							</view>
						</view>
						<view class="formlist" v-if="$formOperates.read('startPlace',formOperatesData)">
							<view class="formgroup padding-17 border-bottom-E3E3E5">
								<view class="labletitletar">
									<label>起始地点</label>
									<text class="required">*</text>
								</view>
								<view class="controlvalue  uni-textarea">
									<textarea v-model="travelApply.startPlace" name="startPlace" maxlength="25"
										:disabled="judge('startPlace')" placeholder="输入" />
								</view>
							</view>
						</view>
						<view class="formlist" v-if="$formOperates.read('destination',formOperatesData)">
							<view class="formgroup padding-17 border-bottom-E3E3E5">
								<view class="labletitletar">
									<label>目的地</label>
									<text class="required">*</text>
								</view>
								<view class="controlvalue  uni-textarea">
									<textarea v-model="travelApply.destination" name="destination" maxlength="25"
										:disabled="judge('destination')" placeholder="输入" />
								</view>
							</view>
						</view>

						<view class="formlist margin-bottom-30"
							v-if="$formOperates.read('description',formOperatesData)">
							<view class="formgroup  padding-17">
								<view class="labletitletar">
									<label>备注</label>
								</view>
								<view class="controlvalue  uni-textarea">
									<textarea v-model="travelApply.description" name="description" maxlength="100"
										:disabled="judge('description')" placeholder="输入" />
								</view>
							</view>
						</view>
					</form>
					<view class="height-100"></view>
				</view>
			</template>
		</flowbefore>
		<w-picker :mode="mode" :pickerList="pickerList" ref="picker" :isSearchShow="isSearchShow"></w-picker>
	</view>
</template>

<script>
	import jnpf from '@/common/js/jnpf.js'
	import helper from '@/common/js/helper.js'
	import graceChecker from '@/common/js/graceChecker.js'
	import wPicker from '@/components/w-picker/w-picker.vue'
	import flowbefore from '@/components/work/flow-before.vue'
	let formRule = [{
			name: "flowTitle",
			checkType: "notnull",
			checkRule: "",
			errorMsg: "输入标题"
		},
		{
			name: "flowUrgent",
			checkType: "notnull",
			checkRule: "",
			errorMsg: "选择紧急程度"
		},
		{
			name: "startDate",
			checkType: "notnull",
			checkRule: "",
			errorMsg: "选择开始时间"
		},
		{
			name: "endDate",
			checkType: "notnull",
			checkRule: "",
			errorMsg: "选择结束时间"
		},
		{
			name: "prepaidTravel",
			checkType: "money",
			checkRule: "",
			errorMsg: "输入合格旅费"
		},
		{
			name: "startPlace",
			checkType: "string",
			checkRule: "1,25",
			errorMsg: "起始地址应为1-25个字符"
		},
		{
			name: "destination",
			checkType: "string",
			checkRule: "1,25",
			errorMsg: "目的地址应为1-25个字符"
		},
	];
	export default {
		data() {
			return {
				mode: '', //底部弹窗分类
				isSearchShow: false,
				disabled: false, //启用
				status: '', //流程状态
				beflows: {
					operstate: "",
					processId: ''
				},
				travelApply: {
					billNo: '',
					flowUrgent: '',
					flowTitle: jnpf.userInfo().realName + '的出差预支申请单',
					applyDate: helper.toDate(new Date, 'yyyy-MM-dd'),
					departmental: jnpf.userInfo().departmentName,
					position: jnpf.userInfo().positionName,
					travelMan: '',
					startDate: '',
					endDate: '',
					startPlace: '',
					destination: '',
					prepaidTravel: '0',
					description: ''
				},
				isBtnClicks: false,
				pickerList: [],
				urgentList: [{
						label: "普通",
						value: "1"
					},
					{
						label: "重要",
						value: "2"
					},
					{
						label: "紧急",
						value: "3"
					}
				],
				statusType: '',
				formOperatesData: [],
				F_Status: 0
			}
		},
		
		onLoad(e) {
			/* 工作区进入状态 */
			let statusType = uni.getStorageSync("type")
			this.statusType = statusType
			let F_Status = uni.getStorageSync('F_Status')
			if(F_Status == 1 || F_Status == 2){
				this.disabled = true;
			}
			/* 工作区进入状态 End*/
			let flowInfo = JSON.parse(e.flowInfo);
			this.beflows.operstate = flowInfo.operstate;
			if (flowInfo.operstate == 'add') {
				this.travelApply.flowId = flowInfo.id;
				this.status = 0;
				uni.setStorageSync('F_Status', 0);
				this.F_Status = Number(uni.getStorageSync('F_Status'))
				this.travelApply.flowUrgent = helper.getSpinnerNew(this.urgentList, '1');
				helper.ajax({
					url: '/api/system/Base/BillRule/BillNumber/WF_TravelApplyNo',
					success: res => {
						this.travelApply.billNo = res.data.data;
					}
				});
				this.getOperatesData(flowInfo.id)
			}
			if (flowInfo.operstate == 'info') {
				uni.setStorageSync('F_Status', F_Status);
				this.F_Status = Number(uni.getStorageSync('F_Status'))
				this.disabled = flowInfo.disabled;
				this.beflows.processId = flowInfo.id;
				this.status = flowInfo.status;
				helper.ajax({
					url: '/api/workflow/Form/TravelApply/' + flowInfo.id,
					success: res => {
						let _travelApply = res.data.data;
						this.travelApply = _travelApply;
						this.travelApply.flowUrgent = helper.getSpinnerNew(this.urgentList, _travelApply
							.flowUrgent);
						this.travelApply.applyDate = helper.toDate(_travelApply.applyDate, 'yyyy-MM-dd');
						this.travelApply.startDate = helper.toDate(_travelApply.startDate, "yyyy-MM-dd HH:mm");
						this.travelApply.endDate = helper.toDate(_travelApply.endDate, "yyyy-MM-dd HH:mm");
					}
				});
				if(this.status == 0 || this.status == 3){
					this.getOperatesData(flowInfo.flowId)
				}else{
					this.$eventHub.$off('formOperates');
					this.$eventHub.$on('formOperates', (data) => {
						this.formOperatesData = data;
						console.log(this.formOperatesData)
						uni.setStorageSync('formOperatesData', data)
					})
				}
			}
		},
		methods: {
			getOperatesData(id) {
				helper.ajax({
					url: '/api/workflow/Engine/FlowEngine/'+id,
					success: res => {
						let kk = JSON.parse(res.data.data.flowTemplateJson);
						this.formOperatesData = [];
						this.formOperatesData = kk.properties.formOperates
						uni.setStorageSync('formOperatesData', this.formOperatesData)
					}
				});
			},
			//判断表单权限可写
			judge(id) {
				return this.statusType == 'backlog' ? this.$formOperates.write(id, this.formOperatesData) : this.F_Status ==
					1 || this.F_Status == 2 ? true : this.$formOperates.write(id, this.formOperatesData)
			},
			flowUrgent(e) {
				uni.hideKeyboard(); //隐藏软键盘  
				let isWrite = this.judge('flowUrgent')
				if (!isWrite) {
					this.pickerList = this.urgentList;
					this.mode = "selector";
					this.$refs.picker.show();
					this.$eventHub.$off('popupmodality');
					this.$eventHub.$on('popupmodality', (data) => {
						this.travelApply.flowUrgent = data.result;
						this.$eventHub.$off('popupmodality');
					});
				}
			},
			startDate(e) {
				uni.hideKeyboard(); //隐藏软键盘  
				let isWrite = this.judge('startDate')
				if (!isWrite) {
					this.mode = "dateTime";
					this.$refs.picker.show();
					this.$eventHub.$off('popupmodality');
					this.$eventHub.$on('popupmodality', (data) => {
						this.travelApply.startDate = data.result;
						this.$eventHub.$off('popupmodality');
					});
				}
			},
			endDate(e) {
				uni.hideKeyboard(); //隐藏软键盘  
				let isWrite = this.judge('endDate')
				if (!isWrite) {
					this.mode = "dateTime";
					this.$refs.picker.show();
					this.$eventHub.$off('popupmodality');
					this.$eventHub.$on('popupmodality', (data) => {
						this.travelApply.endDate = data.result;
						this.$eventHub.$off('popupmodality');
					});
				}
			},
			submit(e) {
				let formData = this.travelApply;
				//根据表单权限过滤必填列表
				formRule = graceChecker.filterRequiredList(formRule,this.formOperatesData)
				if (!graceChecker.check(formData, formRule)) {
					helper.msg(graceChecker.error);
					return;
				}
				this.isBtnClicks = true;
				formData.flowUrgent = helper.setSpinnerNew(this.urgentList, formData.flowUrgent);
				formData.status = 0;
				let method = "POST";
				let url = "/api/workflow/Form/TravelApply";
				if (formData.id) {
					method = "PUT";
					url = url + "/" + formData.id
				}
				formData.applyDate = Date.parse(formData.applyDate);
				formData.startDate = Date.parse(formData.startDate);
				formData.endDate = Date.parse(formData.endDate);
				helper.ajax({
					url: url,
					method: method,
					contentType: "application/json",
					data: formData,
					success: res => {
						helper.msg(res.data.msg, 'success');
						if (this.beflows.operstate == 'add') {
							uni.redirectTo({
								url: '../../operate/started/started',
								success: res => {},
								fail: () => {},
								complete: () => {}
							});
						} else {
							uni.navigateBack();
						}
						this.isBtnClicks = false
					}
				});
			},
			save(e) {
				let formData = this.travelApply;
				//根据表单权限过滤必填列表
				formRule = graceChecker.filterRequiredList(formRule,this.formOperatesData)
				if (!graceChecker.check(formData, formRule)) {
					helper.msg(graceChecker.error);
					return;
				}
				this.isBtnClicks = true;
				formData.flowUrgent = helper.setSpinnerNew(this.urgentList, formData.flowUrgent);
				formData.status = 1;
				let method = "POST";
				let url = "/api/workflow/Form/TravelApply";
				if (formData.id) {
					method = "PUT";
					url = url + "/" + formData.id
				}
				formData.applyDate = Date.parse(formData.applyDate);
				formData.startDate = Date.parse(formData.startDate);
				formData.endDate = Date.parse(formData.endDate);
				helper.ajax({
					url: url,
					method: method,
					contentType: "application/json",
					data: formData,
					success: res => {
						helper.msg(res.data.msg, 'success');
						if (this.beflows.operstate == 'add') {
							uni.redirectTo({
								url: '../../operate/started/started',
								success: res => {},
								fail: () => {},
								complete: () => {}
							});
						} else {
							uni.navigateBack();
						}
						this.isBtnClicks = false
					}
				});
			},
		},
		components: {
			wPicker,
			flowbefore,
		}
	}
</script>

<style>
	.required {
		color: red;
	}
</style>
